<template>
  <div class="app-container customer-div">
    <el-tabs v-model="activeName">
      <el-tab-pane label="品类毛利设置" name="first">
        <div style="margin-top: 20px">
          <!--搜索-->
          <el-form :inline="true" :model="listQuery" size="mini" label-width="100px">
            <el-form-item label="分类名称：">
              <el-input v-model="listQuery.goodsCategory"></el-input>
            </el-form-item>

            <el-form-item>
              <el-button
                @click="handleSearchList()"
                type="primary">
                查询
              </el-button>
              <el-button
                :loading="btnLoading2"
                @click="syncjd()"
                type="primary">
                同步金蝶
              </el-button>
            </el-form-item>
          </el-form>
        </div>
        <!--数据列表-->
        <div class="table-container">
          <el-table
            v-loading="loading"
            :data="list"
            border
            style="width: 100%; margin-top: 20px">
            <el-table-column
              prop="profitId"
              label="ID"
              align="center">
            </el-table-column>
            <el-table-column
              prop="goodsCategory"
              label="分类名称"
              align="center">
            </el-table-column>
            <el-table-column
              prop="profitRate"
              label="毛利比例"
              align="center">
            </el-table-column>
            <el-table-column
              prop="sortValue"
              label="排序"
              align="center">
            </el-table-column>
            <el-table-column
              prop="goodsLineName"
              label="产品线"
              align="center">
            </el-table-column>
            <el-table-column
              align="center"
              label="操作">
              <template slot-scope="scope">
                <el-button type="text" @click="showPop(scope.row)">编辑</el-button>
              </template>
            </el-table-column>

          </el-table>
        </div>
        <div class="pagination-container">
          <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            layout="total, sizes,prev, pager, next,jumper"
            :current-page.sync="listQuery.pageNum"
            :page-size="listQuery.pageSize"
            :page-sizes="[10,15,20]"
            :total="count">
          </el-pagination>
        </div>
      </el-tab-pane>
      <el-tab-pane label="产品线采购权限" name="second">
        <el-button type="primary" size="small" @click="showPop2('add','')">新增产品线</el-button>
        <!--数据列表-->
        <div class="table-container">
          <el-table
            :data="list2"
            border
            style="width: 100%; margin-top: 20px">
            <el-table-column
              label="产品线"
              align="center">
              <template  slot-scope="scope">
                   {{scope.row.goodsLineName}}
              </template>
            </el-table-column>
            <el-table-column
              label="品类"
              align="center">
              <template  slot-scope="scope">
                {{scope.row.goodsCategory}}
              </template>
            </el-table-column>
            <el-table-column
              label="负责人"
              align="center">
              <template  slot-scope="scope">
                {{scope.row.userName}}
              </template>
            </el-table-column>

            <el-table-column
              align="center"
              label="操作">
              <template slot-scope="scope">
                <el-button type="text" @click="showPop2('edit',scope.row)">修改</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>

      </el-tab-pane>
    </el-tabs>




    <!--编辑--->
    <el-dialog
            :close-on-click-modal="false"
            title="编辑品类毛利"
            :beforeClose="handleClose"
            :visible.sync="dialogVisible"
            width="400px">
      <el-form :model="form" size="mini" label-width="120px" :rules="rules" ref="form">
        <el-form-item label="分类名称：" prop="activityName">
          {{form.goodsCategory}}
        </el-form-item>
        <el-form-item label="毛利比例值：" prop="profitRate">
          <el-input-number v-model="form.profitRate" :controls="false" :precision="2" class="inputleft" :min="0"></el-input-number>
        </el-form-item>
        <el-form-item label="产品线：" >
            <el-select v-model="form.goodsLineId">
                <el-option v-for="item in goodsLineList" :label="item.cddValue" :value="item.cddId" :key="item.cddId"></el-option>
            </el-select>
        </el-form-item>

        <el-form-item label="排序：" prop="sortValue">
          <el-input-number v-model="form.sortValue" :controls="false" :precision="0" class="inputleft" :min="0"></el-input-number>
        </el-form-item>


      </el-form>
      <span slot="footer" class="dialog-footer">
          <el-button @click="handleClose">取 消</el-button>
          <el-button type="primary" @click="handleConfirm" :loading="btnLoading">确 定</el-button>
      </span>
    </el-dialog>


    <!--新增/编辑产品线--->
    <el-dialog
      :close-on-click-modal="false"
      title="产品线设置"
      :beforeClose="handleClose2"
      :visible.sync="dialogVisible2"
      width="400px">
      <el-form :model="form2" size="mini" label-width="120px" :rules="rules2" ref="form2">
        <el-form-item label="产品线：" >
          <el-select v-model="form2.goodsLineId" :disabled="popType == 'edit'">
            <el-option v-for="item in goodsLineList" :label="item.cddValue" :value="item.cddId" :key="item.cddId"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="品类：" >
          <el-select v-model="form2.goodsClass" :disabled="popType == 'edit'">
            <el-option v-for="item in goodsClassList" :label="item.goodsCategory" :value="item.goodsCategory" :key="item.goodsCategory"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="负责人：" >
          <el-select v-model="form2.userId" filterable placeholder="请选择" clearable>
            <el-option
              v-for="item in userOptionList"
              :key="item.userId"
              :label="item.userName"
              :value="item.userId">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
          <el-button @click="handleClose2">取 消</el-button>
          <el-button type="primary" @click="handleConfirm2" :loading="btnLoading3">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>

  import { goodsProfitList,goodsProfitEdit,syncGoodsClass,getCustomerSetting,getOrderUsersList} from '@/api/partner'
  import {goodsClassUserList,addGoodsLineUser} from '@/api/company'
  import {formatDate} from '@/utils/date';
  import store from '@/store'
  import { mapGetters } from 'vuex'
  const defaultListQuery = {
    goodsCategory:'',
    pageNum:1,
    pageSize:10,
  };
  const defaultForm = {
    "profitId" : '',
    "activityName" : '',
    "profitRate" : '',
    "sortValue" : '',
    goodsLineId:''

  };

  const defaultForm2 = {
    "profitId" : '',
    "goodsClass" : '',
    "userId" : '',
    goodsLineId:''

  };

  export default {
    name: "index",
    data(){
      return{
        roles:store.getters.roles ? store.getters.roles : [],
        listQuery:JSON.parse(JSON.stringify(defaultListQuery)),
        form:JSON.parse(JSON.stringify(defaultForm)),
        list:[],
        count:0,
        loading:false,
        dialogVisible:false,
        btnLoading:false,
        rules:{
          profitRate:[{required: true, trigger: 'blur' ,message: '此项必填'}],
          sortValue:[{required: true, trigger: 'change' ,message: '此项必填'}],
        },
        btnLoading2:false,
        goodsLineList:[],
        activeName:'first',

        userOptionList:[],
        goodsClassList:[],

        dialogVisible2:false,
        btnLoading3:false,
        rules2:{
          profitRate:[{required: true, trigger: 'blur' ,message: '此项必填'}],
          sortValue:[{required: true, trigger: 'change' ,message: '此项必填'}],
        },
        form2:JSON.parse(JSON.stringify(defaultForm2)),

        listQuery2:JSON.parse(JSON.stringify(defaultListQuery)),
        list2:[],

        count2:0,
        loading2:false,
        popType:''

      }
    },
    computed: {
      ...mapGetters([
        'name',
        'mobile',
        'userId'
      ]),

    },
    created() {
      this.getList();
      this.getList2();
      this.getCustomerSettingList();
      this.getUserOptionList()
    },
    filters: {

    },
    methods:{
      showPop2(type,item){
        this.dialogVisible2 = true;
        this.form2 = JSON.parse(JSON.stringify(defaultForm2));
        this.popType = type
        this.getClassList();
        if(type == 'edit'){
          this.form2.profitId = item.profitId;
          this.form2.goodsLineId = item.goodsLineId;
          this.form2.goodsClass = item.goodsCategory;
          this.form2.userId = item.userId;
        }
      },
      //关闭
      handleClose2(){
        this.dialogVisible2 = false;
      },

      //提交
      handleConfirm2(){
        this.$refs.form2.validate((valid) => {
          if (valid) {
            let data = JSON.parse(JSON.stringify(this.form2));
            this.btnLoading3 = true;
            goodsProfitEdit(data).then((res)=>{
              this.$message({
                type: 'success',
                message: '操作成功!'
              });
              this.btnLoading3 = false;
              this.getList2();
              this.handleClose2();
            }).catch(()=>{
              this.btnLoading3 = false
            })
          }
        })
      },

      getClassList(){
        goodsProfitList({ pageNum:1, pageSize:1000,}).then((res)=>{
            this.goodsClassList = res.list
        })
      },
      //获取员工下拉选项
      getUserOptionList(){
        getOrderUsersList().then((res)=>{
          this.userOptionList = res;
        })
      },
      //获取客户配置
      getCustomerSettingList() {
        getCustomerSetting().then((res) => {
          res.forEach((el) => {
            if (el.cdtCode == 'goods_line') {
              this.goodsLineList = el.data
            }
          });
        })
      },
      syncjd(){
        this.btnLoading2 = true;
        syncGoodsClass().then(()=>{
          this.btnLoading2 = false
          this.$message({
            type: 'success',
            message: '操作成功!'
          })
        }).catch(()=>{
          this.btnLoading2 = false
        })
      },
     //显示弹窗
      showPop(item){
        this.dialogVisible = true;
        this.form = JSON.parse(JSON.stringify(item))
        this.form.goodsLineId = item.goodsLineId ? item.goodsLineId : ''
      },

      //关闭
      handleClose(){
        this.dialogVisible = false;
      },

      //提交
      handleConfirm(){
        this.$refs.form.validate((valid) => {
          if (valid) {
            let data = JSON.parse(JSON.stringify(this.form));
            this.btnLoading = true;
            goodsProfitEdit(data).then((res)=>{
              this.$message({
                type: 'success',
                message: '操作成功!'
              });
              this.btnLoading = false;
              this.getList();
              this.handleClose();
            }).catch(()=>{
              this.btnLoading = false
            })
          }
        })
      },

      handleSearchList(){
        this.listQuery.pageNum = 1;
        this.getList();
      },
      //获取跟进记录
      getList(){
        this.loading = true;
        goodsProfitList(this.listQuery).then((res)=>{
          this.list = res.list;
          this.count = res.count;
          this.loading = false;
        }).catch(()=>{
          this.loading = false;
        })
      },

      handleSizeChange(val){
        this.listQuery.pageNum = 1;
        this.listQuery.pageSize = val;
        this.getList();
      },
      handleCurrentChange(val){
        this.listQuery.pageNum = val;
        this.getList();
      },

      handleSearchList2(){
        this.listQuery2.pageNum = 1;
        this.getList2();
      },
      //获取跟进记录
      getList2(){
        this.loading2 = true;
        goodsClassUserList(this.listQuery2).then((res)=>{
          this.list2 = res.list;
          this.count2 = res.count;
          this.loading2 = false;
        }).catch(()=>{
          this.loading2 = false;
        })
      },

      handleSizeChange2(val){
        this.listQuery2.pageNum = 1;
        this.listQuery2.pageSize = val;
        this.getList2();
      },
      handleCurrentChange2(val){
        this.listQuery2.pageNum = val;
        this.getList2();
      },

    },
  }
</script>

<style scoped lang="scss">
  .avatar-uploader{
    margin-bottom:10px;
    display: inline-block;
    width:80px;
    height:80px;
    border:1px solid #DCDFE6;
    text-align: center;
    line-height: 80px;
  }
</style>
